<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>14-echarts中的series</title>
  <style>
    #charts {
      width: 800px;
      height: 600px;
      border: 1px solid #000;
    }
  </style>
</head>
<body>
  <div id="charts"></div>
  <script src="./js/echarts.min.js"></script>
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script> -->
  <script>
    // 1. 先引入echarts文件
    // 2. 初始化页面标签对象  就是使用init方法根据页面中提供的标签对象 来确定绘图区域
    const charts = echarts.init(document.getElementById('charts'));
    // 3. 根据参数来进一步绘制详细图形
    charts.setOption({
      xAxis: {
        data: ['一季度', '二季度', '三季度', '四季度']
      },
      yAxis: {}, // y轴属性要写上 虽然值是空的
      series: [
        {
          // 折线图
          type: 'line',
          data: [200, 112, 296, 123]
        },
        {
          //柱状图
          type: 'bar',
          data: [139, 121, 188, 176],
          color:'red', // 柱条的颜色
          showBackground: true, // 是否显示背景颜色
          backgroundStyle: {
            color: 'rgba(100, 180, 180, 0.6)' // 背景颜色
          }
        },
        {
          // 饼状图
          type:'pie',
          center:['45%',80],
          radius:75,
          data:[
            {name:'手机',value:30},
            {name:'电脑',value:40},
            {name:'平板',value:10},
            {name:'耳机',value:6},
            {name:'微波炉',value:23}
          ]
        }
      ]
    })
  </script>
</body>
</html>